<template>
  <div class="loading-container">
    <div v-if="error" class="loading-error">
      <div class="loading-error-icon"></div>
      <el-button
          class="retry"
          icon="el-icon-refresh-left"
          plain
          :loading="loading"
          @click="redirect"
      >重新获取</el-button>
      <el-link :underline="false" @click="goLogin">返回登录</el-link>
    </div>
    <div v-else class="loading-spinner">
      <svg class="gear" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path id="p" fill="#fdb"
              d="M94.1 58.8c.6-2.8.9-5.8.9-8.8s-.3-6-.9-8.8l-11.7-.4c-.7-2.6-1.7-5-3-7.3l8-8.5c-3.3-4.9-7.5-9.2-12.5-12.5l-8.5 8c-2.3-1.3-4.7-2.3-7.3-3l-.3-11.6C56 5.3 53 5 50 5s-6 .3-8.8.9l-.4 11.7c-2.6.7-5 1.7-7.3 3l-8.5-8c-4.9 3.3-9.2 7.5-12.5 12.5l8 8.5c-1.3 2.3-2.3 4.7-3 7.3l-11.6.3C5.3 44 5 47 5 50s.3 6 .9 8.8l11.7.4c.7 2.6 1.7 5 3 7.3l-8 8.5c3.3 4.9 7.5 9.2 12.5 12.5l8.5-8c2.3 1.3 4.7 2.3 7.3 3l.4 11.7c2.7.5 5.7.8 8.7.8s6-.3 8.8-.9l.4-11.7c2.6-.7 5-1.7 7.3-3l8.5 8c4.9-3.3 9.2-7.5 12.5-12.5l-8-8.5c1.3-2.3 2.3-4.7 3-7.3l11.6-.3zM50 66.9c-9.3 0-16.9-7.6-16.9-16.9S40.7 33.1 50 33.1 66.9 40.7 66.9 50 59.3 66.9 50 66.9z"></path>
      </svg>
      <svg class="gear" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <use href="#p"></use>
      </svg>
      <p class="message">正在初始化数据...</p>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';
import VueRouter from 'vue-router';
import Setting from '../setting';
import Menus from '@/config/router/menus';
import {resolveRoutes} from '@/config/router/helper';

export default {
  name: 'loading_view',
  data() {
    return {
      sec: 10,
      error: false,
      loading: false,
    };
  },
  computed: {
    ...mapState(['menus', 'authorization']),
  },
  mounted() {
    this.redirect();
  },
  methods: {
    goLogin() {
      this.$router.replace('/login');
    },
    async redirect() {
      if (!this.authorization) {
        this.$router.replace('/login');
        return;
      }
      const page = await this.getRedirectPage();
      if (!page) {
        return;
      }
      const {redirectedFrom} = this.$route;
      if (!redirectedFrom) {
        await this.$router.replace(page.url);
        return;
      }
      const {matched} = this.$router.match(redirectedFrom);
      const matchedRoute = matched[matched.length - 1];
      await this.nextMacro();
      if (matchedRoute.path !== redirectedFrom) {
        await this.$router.replace(page.url);
      } else {
        await this.$router.replace(matchedRoute);
      }
    },
    async getRedirectPage() {
      if (!this.menus || this.menus.length <= 0) {
        // this.loading = true;
        // const [, result] = await to(this.$axios.get('/Sys/SysMenu/selectListByUserId'));
        // this.loading = false;
        // this.error = !result || !result.success || !Array.isArray(result.data);
        let menus = Object.freeze(Menus);
        this.$store.commit('menus', Object.freeze(menus));
        this.addRoutes(this.filterMenu(menus));
      }
      return this.getFirstPage(this.menus);
    },
    filterMenu(menus) {
      if (!Array.isArray(menus)) {
        return [];
      }
      return menus.reduce((prev, {children, ...menu}) => {
        if ([1, 2, 100].includes(menu.type)) {
          if (Array.isArray(children) && children.length > 0) {
            menu.children = this.filterMenu(children);
          }
          prev.push(menu);
        }
        return prev;
      }, []);
    },
    getFirstPage(menus) {
      if (!Array.isArray(menus) || menus.length <= 0) {
        return null;
      }
      for (let i = 0; i < menus.length; i++) {
        const menu = menus[i];
        if ([1, 2].includes(menu.type) && menu.url) {
          return menu;
        }
        const childMenu = this.getFirstPage(menu.children);
        if (childMenu) {
          return childMenu;
        }
      }
      return null;
    },
    // 添加动态路由
    addRoutes(menus) {
      this.$router.matcher = new VueRouter(Setting.router).matcher;
      if (menus.length <= 0) {
        return;
      }
      const isIncludes = (url, list) => {
        if (!Array.isArray(list) || list.length <= 0) {
          return false;
        }
        return list.some(item => {
          if (item.url === url) {
            return true;
          }
          return isIncludes(url, item.children);
        });
      };
      // 过滤掉1级菜单有属于其它1级菜单下的子菜单
      menus = menus.filter(item => {
        const otherMenus = menus.filter(m => m.id !== item.id);
        return !otherMenus.some(m => isIncludes(item.url, m.children))
      });
      this.$router.addRoute({
        path: '/',
        component: {
          render: h => h('router-view'),
        },
        children: resolveRoutes(menus),
      });
    },
  },
};
</script>
<style lang="less" scoped>
.loading-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #222428, #444856);
  display: flex;
  align-items: center;
  justify-content: center;

  .loading-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;

    .loading-error-icon {
      width: 619px;
      height: 512px;
      background: url("../assets/img/error.svg") center no-repeat;
      background-size: contain;
    }

    .retry {
      margin-bottom: 15px;
    }

    .el-link {
      color: #fff;
    }
  }

  .loading-spinner {
    text-align: center;
  }

  svg {
    display: unset;
    overflow: hidden;
    vertical-align: middle;
  }

  svg.gear {
    width: 64px;
    animation: loading 0.5s infinite linear;
  }

  .gear:nth-of-type(1) {
    margin: 64px 0 0 -12px;
    animation-direction: reverse;
  }

  .message {
    color: #888;
    animation: flash 2s infinite ease-in-out;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

@keyframes flash {
  0% {
    color: #888;
  }
  60% {
    color: #eee;
  }
  100% {
    color: #888;
  }
}
</style>
